<template>
    <div class="other-info-page">
        <!--        <van-cell title="近14天您是否曾经在湖北省居住或到过湖北省？" />-->
        <!--        <van-field name="is_hubei" :rules="[{ required: true, message: '请选择' }]">-->
        <!--            <template #input>-->
        <!--                <van-radio-group v-model="formItem.is_hubei" direction="horizontal">-->
        <!--                    <van-radio name="1" icon-size="22px">是</van-radio>-->
        <!--                    <van-radio name="0" icon-size="22px">否</van-radio>-->
        <!--                </van-radio-group>-->
        <!--            </template>-->
        <!--        </van-field>-->
        <div class="van-cell">
            <div class="van-cell__title">
                <span>近14天您是否接触新冠肺炎确诊病例或疑似病例？</span><span style="color: red">（如有接触，将即时报市疾控中心）</span>
            </div>
        </div>
        <!--        <van-cell title="近14天您是否接触新冠肺炎确诊病例或疑似病例？（如有接触，将即时报市疾控中心）" />-->
        <van-field name="is_contact" :rules="[{ required: true, message: '请选择' }]">
            <template #input>
                <van-radio-group v-model="formItem.is_contact" @change="isContact" direction="horizontal">
                    <van-radio name="1" icon-size="22px">是</van-radio>
                    <van-radio name="0" icon-size="22px">否</van-radio>
                    <!--<van-radio name="2" icon-size="22px">不确定</van-radio>-->
                </van-radio-group>
            </template>
        </van-field>
        <van-cell title="当前健康状况（可多选）"/>
        <van-field name="health_state_copy" :rules="[{ required: true, message: '请至少选择一项' }]">
            <template #input>
                <van-checkbox-group v-model="formItem.health_state_copy" icon-size="22px">
                    <van-checkbox @click="healthChange('1')" shape="square" name="1">没有出现症状</van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('2')" shape="square" name="2">
                        感冒症状：乏力、咳嗽、发烧、肌肉痛、头痛
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('3')" shape="square" name="3">
                        喘憋、呼吸急促
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('4')" shape="square" name="4">
                        恶心呕吐、腹泻
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('5')" shape="square" name="5">心慌、胸闷
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('6')" shape="square" name="6">
                        结膜炎（红眼病表现：眼睛涩、红、分泌物）
                    </van-checkbox>
                    <van-checkbox :disabled="healthDisabled" @click="healthChange('7')" shape="square" name="7">其他症状
                    </van-checkbox>
                </van-checkbox-group>
            </template>
        </van-field>

        <van-field
                v-model="formItem.temp"
                name="temp"
                label="当前体温（℃）"
                placeholder="请输入当前体温"
                :maxlength="4"
                @focus="bodyScrollTop"
                @blur="bodyScrollTop"
                :rules="[{ validator: tempValidator,required: true, message: '请只填写体温数字' }]"></van-field>

        <van-field
                v-model="formItem.stay_city"
                name="stay_city"
                label="14天内停留城市"
                rows="1"
                autosize
                type="textarea"
                placeholder=""
                @focus="bodyScrollTop"
                @blur="bodyScrollTop"
                :rules="[{ required: true, message: '请填写14天内停留城市' }]"></van-field>

    </div>
</template>

<script>
import { Dialog } from 'vant'

export default {
  name: 'RecentSituation',
  data () {
    return {
      formItem: {
        is_hubei: '',
        is_contact: '',
        health_state_copy: [],
        temp: '',
        stay_city: ''
      },
      healthDisabled: false,
      showArea: false
    }
  },
  props: {
    formData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  computed: {},
  methods: {
    isContact () {
      console.log(this.formItem.is_contact)
      if (this.formItem.is_contact.toString() === '1') {
        Dialog.alert({
          title: '温馨提示',
          message: '<span style="color:red;">请再次确认近14天您是否接触新冠肺炎确诊病例或疑似病例？</span>'
        }).then(() => {
          // on close
        })
      }
    },
    bodyScrollTop () {
      winToTop()
      // document.body && (document.body.scrollTop = 0)
      this.setStorage(this.formItem)
    },
    setStorage (formData) {
      window.localStorage.setItem('formData', JSON.stringify(formData))
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    tempValidator (val) {
      const reg = /^((3[5-9])|4[0-1]).\d|((3[5-9])|4[0-2])$/
      // let num = parseFloat(val).toFixed(1)
      // if (num < 35 || num > 42) {
      if (!reg.test(val)) {
        this.failNotice('请检查体温格式')
        return false
      }
      return true
    },
    healthChange (val) {
      if (val === '1') {
        let str = this.formItem.health_state_copy.toString()
        if (str.indexOf('1') >= 0) {
          this.healthDisabled = false
        } else {
          this.healthDisabled = true
          this.formItem.health_state_copy = ['1']
        }
      } else {
        if (this.healthDisabled) {
          this.formItem.health_state_copy = ['1']
        } else {
          this.healthDisabled = false
        }
      }
    },
    checkForm () {
      // if (this.formItem.is_hubei === '') {
      //  this.failNotice('请选择是否曾经在湖北省居住或到过湖北省')
      //  return false
      // }
      if (this.formItem.is_contact === '') {
        this.failNotice('请选择是否接触新冠肺炎确诊或疑似患者')
        return false
      }
      if (this.formItem.health_state_copy.length === 0) {
        this.failNotice('请选择当前健康状况')
        return false
      }
      return this.formItem
    },
    autoHandle () {
      this.formItem.health_state_copy = this.formData.health_state.toString().split('^')
      this.formItem.is_hubei = this.formData.is_hubei
      this.formItem.is_contact = this.formData.is_contact
      this.formItem.temp = this.formData.temp
      this.formItem.stay_city = this.formData.stay_city
      console.log('组件内处理', this.formItem)
    }
  },
  watch: {
    formData (val) {
      console.log('其它信息组件内部表单`', val)
      this.autoHandle()
    }
  }
}
</script>

<style scoped>
    .other-info-page >>> .van-field__label {
        min-width: 5.625rem;
        margin-right: 10px;
        width: auto;
    }

    /deep/ .van-radio {
        margin-bottom: 8px;
    }

    /deep/ .van-checkbox {
        margin-bottom: 8px;
    }
</style>
